<!--
 * @Descripttion: ''
 * @version: 1.0.0
 * @Author: CaiLuLu
 * @Date: 2021-10-25 13:48:32
 * @LastEditors: Andy
 * @LastEditTime: 2022-01-18 09:07:56
-->
<template>
  <div>
    <div v-if="authorityActions.length <= maxLength">
      <span  v-for="action in authorityActions" v-bind:key="action">
        <slot :name="action"></slot>
      </span>
    </div>
    <div v-else>
      <span v-for="action in rowActions" v-bind:key="action">
        <slot :name="action" ></slot>
      </span>
      <a-dropdown class="item" :trigger="['click']" overlayClassName="action-dropdown">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          更多 <a-icon type="down" />
        </a>
        <a-menu slot="overlay" >
          <a-menu-item v-for="(action,index) in moreActions" v-bind:key="index">
            <slot :name="action"></slot>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    buttonInfo: { type: [Object], default: () => { return {} } },
    maxLength: { type: [Number], default: 3 },
    funcs: { type: [Object] },
  },
  mounted() {
    this.emitActionWidth()
  },
  watch: {
    funcs() {
      this.emitActionWidth()
    }
  },
  data() {
    return {
    }
  },
  computed: {
    authorityActions() {
      let authorityActions =  []
      for(let action in this.buttonInfo){
        if(this.funcs[action]){
          authorityActions.push(action)
        }
      }
      return authorityActions
    },
    rowActions() {
      return this.authorityActions.slice(0, this.maxLength-1)
    },
    moreActions() {
      return this.authorityActions.slice(this.maxLength-1, this.authorityActions.length)
    },
  },
  methods: {
    emitActionWidth() {
      let actionWidth = this.getActionWidth()
      this.$emit("actionWidth", actionWidth)
    },
    getActionWidth() {
      let actionWidth = 16
      if(this.authorityActions.length <= this.maxLength){
        this.authorityActions.map((item)=>{
          actionWidth += this.buttonInfo[item]
        })
        return actionWidth
      } else {
        this.authorityActions.map((item, index)=>{
          if(index < this.maxLength-1)
          actionWidth += this.buttonInfo[item]
        })
        return actionWidth += 50
      }
    },
  },
}
</script>
<style lang="less">
.action-dropdown{
  .ant-dropdown-menu-item{
    padding:5px  0px;
    .gb-display-block{
      padding:0px 12px
    }
  }
}
</style>